<template>
    <div class="toolsBox">
        <div ref="div" class="tools" @click="draFn" type="primary" :style="`top:${top}px;right:${toolRight}px;box-shadow:${boxShaow};z-index:${zIndex}`">
            <img class="toolImg" src="@/assets/img/board/tool.png" alt="">
            <p>小工具</p>
        </div>
        <el-drawer
            title="我是标题"
            :append-to-body="true"
            size="108px"
            :visible.sync="drawer"
            :with-header="false"
            :before-close="beforeClose">
            <ul class="toolList">
                <li @click="worldsFn">
                    <i class="iconfont icon-icon_shiyongwendang toolListIcon" style="background:#0066FF"></i>
                    <p>相关文档</p>
                </li>
                <li @click="mailListFn">
                    <i class="iconfont icon-icon-dianhua toolListIcon" style="background:#009900"></i>
                    <p>单位通讯录</p>
                </li>
                <li @click="cloudDiskFn">
                    <i class="iconfont icon-yunduanxiazai toolListIcon" style="background:#0099FF"></i>
                    <p>云盘</p>
                </li>
                <li @click="feedBackFn">
                    <i class="iconfont icon-chakan toolListIcon" style="background:#FA6400"></i>
                    <p>评价反馈</p>
                </li>
                <li @click="onlineServiceFn">
                    <i class="iconfont icon-pinglun_pad toolListIcon" style="background:#00CC99"></i>
                    <p>在线咨询</p>
                </li>
                <li @click="downloadFn">
                    <i class="iconfont icon-xiazai toolListIcon" style="background:#0099FF"></i>
                    <p>常用下载</p>
                </li>
            </ul>
        </el-drawer>
        <WordDialog :dialogWord="dialogWord"></WordDialog>
        <MailListDialog :dialogMailList="dialogMailList"></MailListDialog>
        <CloudDiskDialog :dialogCloudDisk="dialogCloudDisk"></CloudDiskDialog>
        <FeedBackDialog :dialogFeedBack="dialogFeedBack"></FeedBackDialog>
        <OnlineServiceDialog :dialogOnlineService="dialogOnlineService"></OnlineServiceDialog>
        <DownLoad :dialogDownload="dialogDownload"></DownLoad>
    </div>
</template>

<script>
import WordDialog from './toolDialog/WordDialog';
import MailListDialog from './toolDialog/MailListDialog';
import CloudDiskDialog from './toolDialog/CloudDiskDialog';
import FeedBackDialog from './toolDialog/FeedBackDialog';
import OnlineServiceDialog from './toolDialog/OnlineServiceDialog';
import DownLoad from './toolDialog/Download';
export default {
    name: 'Tools',
    data () {
        return {
            drawer: false,
            toolRight:0,
            boxShaow:'2px 0px 10px 0px rgba(0, 0, 0, 0.5)',
            zIndex:9,
            top:300,
            openMenu:true,
            dialogWord:false,
            dialogMailList:false,
            dialogCloudDisk:false,
            dialogFeedBack:false,
            dialogOnlineService:false,
            dialogDownload:false
        };
    },
    components:{
        WordDialog,
        MailListDialog,
        CloudDiskDialog,
        FeedBackDialog,
        OnlineServiceDialog,
        DownLoad
    },
    mounted(){
        this.$nextTick(() => {
            const div = this.$refs.div;
            div.addEventListener('dragstart',() => {
                
            });
            div.addEventListener('drag',() => {
                // this.top = e.pageY;
            });
            div.addEventListener('dragend',(e) => {
                // div.style.transition = 'all 0.3s';
                this.top = e.pageY;
            });

        });
    },

    methods: {
        // 打开tools
        draFn(){
            if(this.openMenu){
                this.drawer = true;
                this.toolRight = 108;
                this.boxShaow = 'none';
                this.zIndex = 9999;
                this.openMenu = !this.openMenu;
            }else{
                this.beforeClose();
            }
            
        },
        // 关闭tools
        beforeClose(){
            this.toolRight = 0;
            this.drawer = false;
            this.boxShaow = '2px 0px 10px 0px rgba(0, 0, 0, 0.5)';
            this.zIndex = 9;
            this.openMenu = !this.openMenu;
        },
        // 关闭所有弹框
        closeALL () {
            this.dialogWord = false;
            this.dialogMailList = false;
            this.dialogCloudDisk = false;
            this.dialogFeedBack = false;
            this.dialogOnlineService = false;
            this.dialogDownload = false;
            // this.zIndex = 9999;
            this.beforeClose();
        },
        // 打开相关文档
        worldsFn(){
            this.dialogWord = true;
            this.zIndex = 9;
        },
        // 打开单位通讯录
        mailListFn(){
            this.dialogMailList = true;
            this.zIndex = 9;
        },
        // 打开云盘
        cloudDiskFn(){
            this.dialogCloudDisk = true;
            this.zIndex = 9;
        },
        // 打开评价反馈
        feedBackFn(){
            this.dialogFeedBack = true;
            this.zIndex = 9;
        },
        // 打开在线咨询
        onlineServiceFn(){
            this.dialogOnlineService = true;
            this.zIndex = 9;
        },
        // 打开常用下载
        downloadFn(){
            this.dialogDownload = true;
            this.zIndex = 9;
        }
    },
};
</script>

<style lang="scss" scoped>
.toolsBox{
    .tools{
        background: #fff;
        width: 60px;
        height: 80px;
        position: fixed;
        // top: 200px;
        right: 0px;
        // bottom: 0;
        margin: auto;
        box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.5);
        border-radius: 10px 0px 0px 10px;
        z-index: 9;
        text-align: center;
        cursor: pointer;
        transition: right 0.3s 1ms;
        .toolImg{
            width: 32px;
            height: 32px;
            display: block;
            margin:14px auto 10px;
        }
        p{
            font-size: 12px;
            color: #333;
        }
    }
    
    
        
    
}
</style>
<style lang="scss">
.toolList{
    li{
        text-align: center;
        color: #333;
        font-size: 14px;
        cursor: pointer;
    }
}
.toolListIcon{
    display: inline-block;
    width:48px;
    height: 48px;
    border-radius: 10px;
    margin-top: 26px;
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
    line-height: 48px;
}
</style>